<template>
  <div>
    <div class="box">
      <el-form :model="queryForm" ref="queryRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="职位：" prop="name">
              <el-input v-model.trim="queryForm.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button @click="getRoleDataPage(null)" :loading="searchLoading" type="primary">
                <icons name="search"></icons>
                搜索
              </el-button>
              <el-button @click="reset()">
                <icons name="reset"></icons>重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="container">
      <el-button @click="openBox(null)" type="primary" style="margin-bottom: 10px">+ 新增</el-button>
      <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
        <el-table-column prop="name" label="职位" align="center" header-align="center" />
        <el-table-column label="状态" align="center" header-align="center">
          <template #default="{ row }">
            <el-tag class="ml-2" :type="row.statusCode ? '' : 'danger'">{{ row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="权限" align="center" header-align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ JSON.parse(row.roles) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" header-align="center">
          <template #default="{ row }">
            <el-button @click="openBox(row)" type="text">编辑</el-button>
            <el-button @click="deleRole(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]" :total="total" :current-page.sync="queryForm.page"
          @current-change="hCurrentChange" @size-change="hSizeChange" />
      </div>
    </div>
    <editRole :valueShow="boxShow" :editRoleInfo="boxRow" @closeBox="closeBox" />
  </div>
</template>
<script lang="ts">
import { deleteRole, roleDataPage } from '@/api/organization/roles'
import { defineComponent, reactive, ref } from 'vue'
import editRole from './components/editRole.vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
  setup(props) {
    const { proxy } = useCurrentInstance()
    const total = ref(0)
    const tableLoading = ref(false)
    const searchLoading = ref(false)
    const tableData = ref(null)
    const queryRef: any = ref(null)
    const boxShow = ref(false)
    const boxRow = ref(null)
    const queryForm = reactive({
      name: '',
      page: 1,
      pageSize: 10
    })

    const getRoleDataPage = (page) => {
      page && (queryForm.page = page)
      searchLoading.value = true
      tableLoading.value = true
      roleDataPage(queryForm).then((res: any) => {
        total.value = res.data.total
        tableData.value = res.data.result
      }).finally(() => {
        searchLoading.value = false
        tableLoading.value = false
      })
    }

    const reset = () => {
      queryRef.value.resetFields()
    }

    const openBox = (row) => {
      boxShow.value = true
      row && (boxRow.value = row)
    }

    const closeBox = (val) => {
      boxShow.value = false
      boxRow.value = null
      val && getRoleDataPage(null)
    }

    const deleRole = (id) => {
      ElMessageBox.confirm(
        '确定删除此职位?',
        '',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          tableLoading.value = true
          deleteRole({ id }).then((res: any) => {
            getRoleDataPage(null)
            ElMessage.success(res.message)
          }).finally(() => {
            tableLoading.value = false
          })
        })
        .catch(() => {
        })
    }

    const hCurrentChange = (val) => {
      queryForm.page = val
    }

    const hSizeChange = (val) => {
      queryForm.pageSize = val
    }

    getRoleDataPage(null)

    return {
      total,
      tableLoading,
      searchLoading,
      tableData,
      queryRef,
      queryForm,
      boxShow,
      boxRow,
      hCurrentChange,
      hSizeChange,
      closeBox,
      getRoleDataPage,
      reset,
      openBox,
      deleRole
    }
  },
  components: { editRole }
})
</script>
<style></style>
